<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bootstrap/dist/css/custom-pagination.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.top{
				width: 100%;
				height: 100px;
			}
			#ss{
				width: 320px;
                height: 40px;
				padding-left: 20px;
				border-radius:20px 0 0 20px ;
				margin-right: -3px;
				outline: none;
				border: 1px solid red;
			}
			#btn{
				width: 80px;
                height: 40px;
                background-color: red;
                margin-top: 22px;
                font-size: 18px;
                color: white;
				border: none;
                margin-left: -2px;
				border-radius:0 20px 20px 0  ;
				outline: none;
			}
			.goodsContent {
				width: 100%;
			}
			.goodsContent  .row div{
				padding: 5px;
				border: 0.5px solid gainsboro;
			}
            .item span{
				float: left;
				color: red;
				font-size: 20px;
				font-weight: bolder;
			}
            .item a{
				text-align: center;
				line-height: 20px;
				float: right;
				display: inline-block;
				width: 70px;
				height: 20px;
				color: red;
				border: 1px solid red;
			}
			#page{
                 width: 100%;
                 height: 80px;
                margin: 50px 0;
				}

		</style>
	</head>

	<body>
	<div class="top">
		
		<div class="container">
			<form class="text-right">
			<input type="stext" name="" id="ss" placeholder="搜索你想要的商品" />
			<input type="button" id="btn" value="搜索" />
		</form>
		</div>
	</div>	
		
		
		<div >
		
		</div>

		<div class="goodsContent">
             
			 <div class="container">
				 
				 <div class="row">
					 
					 
				 </div>
				 
			 </div>
			 
		</div>
		<!-- 翻页 -->
		<div id="page" class="page"></div>
		
	</body>
	
	<script src="bootstrap/dist/js/custom-pagination.min.js"></script>
	<script src="bootstrap/dist/js/jquery.min.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function getgoods(ty,num){
			var ty=ty||"豆干";
			 var num=num||1
		$.ajax({
			type: "get",
			url: "http://127.0.0.1/w/website/findGoodsList",
			async: true,
			data: {
				"platId": "d0a500ecf8ab41aa9ffe8e18ac6419e1",
				"info": ty,
				"pageNo": num
			},
			success: function(res) {
				console.log(res)
				var goodsList = res.data.tbk_dg_material_optional_response.result_list.map_data;
				console.log(goodsList);
				for (var i = 0; i < goodsList.length; i++) {
					var title = goodsList[i].short_title;
					var img = goodsList[i].pict_url;
					var item_url = goodsList[i].item_url;
					var coupon_share_url = goodsList[i].coupon_share_url;
					var zk_final_price = goodsList[i].zk_final_price;
					var coupon_amount = goodsList[i].coupon_amount;
					var item_id = goodsList[i].item_id;
					if (coupon_amount) {
						
					}else{
						coupon_amount=0;
					}
					var zhjg = (zk_final_price-coupon_amount).toPrecision(3);
					var str = `
					<div class = "col-xs-6  col-md-3  col-offset-4">
						<a href="xiangqing.html?id=${item_id}" target="blank">
						  <img class="img-responsive" data-yh="${coupon_amount}" data-id="${item_id}" src="${img}"/>
                          </a>
						<h5>${title}</h5>
						<p>
							<span>价格:<s>${zk_final_price}</s></span>
						</p>
						<p class="item">
							<span>￥${zhjg}</span>
							<a href="https:${coupon_share_url}">${coupon_amount}元券</a>
						</p>
						
					</div>
				`;
					$(".goodsContent  .container .row").append(str);
				}
                 $(".container .row img").click(function(){
					console.log($(this).attr("data-id"));
					localStorage.setItem("id",$(this).attr("data-id"))
					localStorage.setItem("yh",$(this).attr("data-yh"));
				})
			}
		});
		}
		getgoods()
		$("#btn").click(function(){
			$(".goodsContent .container .row").html("")
		  	getgoods($("#ss").val(),1)
		})
		// 翻页
		var box = new CustomPagination('#page', {
         total: 5,//总页数
         changePage: function (pageNum) {//切换页码成功回调
        console.log('当前页码：'+pageNum)
      }
	});
	$(".page li").click(function(){
        
		  	getgoods($("#ss").val(),$(this).text())
			 $(".goodsContent .container .row").html("")
	})
	$(".page .prev-page").click(function(){
        $(".goodsContent .container .row").html("")
		  	getgoods($("#ss").val(),pageNum-1) 
	})
	$(".page .next-page").click(function(){
        $(".goodsContent .container .row").html("")
		  	getgoods($("#ss").val(),pageNum+1) 
	})
	$(".page .go").click(function(){
        $(".goodsContent .container .row").html("")
		getgoods($("#ss").val(),$("#page-input").val()) 
	})
	</script>

</html>